<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap {
        border: 1px solid red;
    }
</style>

<body>
    <div name="div">3</div>
    <div id="div1" class="container" name="6">
        <p class="p" name="ceshi">第一段文字</p>
        <p class="p" name="ceshi">第二段文字</p>
        <p class="p" name="ceshi">第三段文字</p>
    </div>
    <div id="div2" class="container">
        <h1>这是一个标题</h1>
    </div>
    <button class="btn">打印1</button>

    <button id="del">删除一个p标签</button>
    <div class="wrap"></div>
</body>
<script>
    /* 
                   1. DOM是哪种数据类型 ？  树形结构（DOM数）
                   2.DOM节点操作 ？   
                */
    /* property 和 attribute */
    // property :修改对象属性，不会体现到html结构中
    // attribute：修改html属性，会改变html结构
    // 两者都有可能引起DOM重新渲染
    let div1 = document.getElementById('div1')
    let div2 = document.getElementById('div2')
    let wrap = document.querySelector('.wrap')
    let pList = document.getElementsByTagName('p') //获取元素集合，会动态改变获取的元素
    let con = document.getElementsByClassName('p') //获取元素集合，会动态改变获取的元素
    let byName = document.getElementsByName('ceshi') //获取元素集合，会动态改变获取的元素,通过元素的name属性获取元素
    let p1 = document.querySelectorAll('p') //获取元素集合，不会动态改变获取的元素
    let p2 = document.querySelector('.container') //获取第一个符合条件的元素
    let btn = document.querySelector('.btn')
    btn.addEventListener('click', function() {
        console.log(pList, 'getElementsByTagName');
        console.log(con, 'getElementsByClassName');
        console.log(byName, 'getElementsByName');
        console.log(p1, 'querySelectorAll');
    })
    let delBtn = document.getElementById('del')
    delBtn.addEventListener('click', function() {
            pList[0].remove(0)
        })
        //property 形式       对dom结构，js变量进行修改
    p1[0].style.color = 'blue'
    console.log(btn.className, 'className');
    console.log(btn.nodeName, 'nodeName');
    console.log(btn.nodeType, 'nodeType');

    //attribute 形式     对dom节点属性进行修改
    console.log(btn.getAttribute('class'), 'getAttribute');
    console.log(p1[0].getAttribute('name'), 'getAttribute');
    btn.setAttribute('style', 'font-size:30px')
    console.log(div1.children, 'chidlren');
    //1.移动节点。把div1中的第一个p标签移到.wrap中
    let moveNode = div1.children[0] //1.获取div1的第一个子节点
    wrap.appendChild(moveNode) //2.把子节点添加到wrap中
        //2.删除div1中的第二个p标签
    div1.removeChild(div1.children[1])
        //3.插入一个元素
    let newP = document.createElement('p')
    newP.innerHTML = '新插入的p标签'
    wrap.appendChild(newP)
</script>

</html>